<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width:100%;height:30px;">能耗占比</dv-decoration-7>
    <div id="ringlike" style="width: 100%;height: 250px"></div>
  </dv-border-box-8>
</template>

<script>
export default {
  name: "Ringlike",
  mounted(){
    this.initEchart();
  },
  data() {
    return  {

    }
  },
  methods:{
    initEchart() {
      // 使用静态数据代替API请求
      const staticData = {
        totalOfficePowerConsume: 35,  // 办公耗电量
        totalOfficeWaterConsume: 25,   // 办公用水量
        totalWaterConsume: 20,        // 生产用水量
        totalPowerConsume: 20         // 生产耗电量
      };

      // 计算表格数据value总和
      const total = staticData.totalOfficePowerConsume + staticData.totalOfficeWaterConsume
        + staticData.totalWaterConsume + staticData.totalPowerConsume;
      // 初始化图表
      let myChart = this.$echarts.init(document.getElementById('ringlike'), 'dark');
      // 设置图表配置项
      let option = {
        backgroundColor: '',
        tooltip: {
          trigger: 'item'
        },
        // 饼图配置项
        series: [
          {
            name: '能耗占比',
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {  // 添加的边框样式
              borderWidth: 2,
              borderColor: '#fff'
            },
            // 饼图数据
            data: [
              { value: staticData.totalOfficePowerConsume, name: '办公耗电量' },
              { value: staticData.totalOfficeWaterConsume, name: '办公用水量' },
              { value: staticData.totalWaterConsume, name: '生产用水量' },
              { value: staticData.totalPowerConsume, name: '生产耗电量' }
            ]
          },
          // 饼图中心文字配置项
          {
            name: '总数', // 饼图名称
            type: 'pie', // 饼图类型
            radius: ['0%', '0%'], // 隐藏饼图
            itemStyle: { // 防止鼠标悬浮到标签时出现放大的点
              color: 'transparent' // 透明色
            },
            label: {
              position: 'inside', // 标签位置
              formatter: `{data|{c}}\n{serie|{a}}`, // 标签内容
              // 标签样式
              rich: {
                data: {
                  fontWeight: 'bold', // 加粗
                  fontSize: 18,
                  color: `#fff`,
                  lineHeight: 32,
                  textBorderColor: `transparent`, // 边框颜色
                  textBorderWidth: 0
                },
                serie: {
                  fontSize: 16,
                  color: `#fff`,
                  lineHeight: 18,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [ // 计算表格数据value总和
              total
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  },

}
</script>

<style scoped>

</style>
